<template>
    <div>
        <el-dialog v-if="hand" v-dialogDrag title="常用语分组" :visible="isShowEditDialog" width="30%" @close="dialogClose">
            <el-form ref="editForm" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="业务类型" prop="ywlx">
                    <el-select v-model="ruleForm.ywlx" clearable placeholder="业务类型">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="常用语类型" prop="cyylx">
                    <el-select v-model="ruleForm.cyylx" clearable placeholder="常用语类型">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分组名称" prop="name">
                    <el-input type="text" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitData()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-if="!hand" v-dialogDrag title="常用语分组" :visible="isShowEditDialog" width="60%" @close="dialogClose">
            <el-form>
                <el-form-item>
                    <el-transfer filterable filter-placeholder="请输入常用语名称" :titles="title" v-model="value" :data="data" target-order="push">
                    </el-transfer>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitData()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
 
<script>
import { findByName } from '@/api/systemManage/dataDictionary';
import { getCyyByAll, updateCyyfz } from '@/api/evaluation/word';
import { addCyyglb, getCyyInCyyfz } from '@/api/evaluation/wordgroup'
export default {
    //接受父组件
    props: {
        isShowEditDialog: {
            type: Boolean
        },
        record: {
            type: Object
        },
        hand: {
            type: Boolean
        },
        fzid: {
            type: Number
        }
    },
    data () {
        return {
            ruleForm: {},
            options1: [],
            options2: [],
            title: [],
            data: [],
            value: [],
            rules: {
                ywlx: [
                    {
                        required: true,
                        message: '请选择业务类型',
                        trigger: 'change,blur'
                    }
                ],
                cyylx: [
                    {
                        required: true,
                        message: '请选择常用语类型',
                        trigger: 'change,blur'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '请设置分组名称',
                        trigger: 'change,blur'
                    }
                ],
            }
        }
    },
    methods: {
        dialogClose () {
            this.$emit('dialogClose');
        },
        // filterMethod () {

        // },
        submitData () {
            if (this.hand) {
                this.$refs.editForm.validate((valid) => {
                    if (!valid) {
                        return;
                    }
                    else {
                        this.ruleForm.companyId = 3;
                        updateCyyfz(this.ruleForm).then((res) => {
                            this.$emit("close");
                            this.$emit("dialogClose");
                        });
                    }
                });
            } else {
                addCyyglb({ fzid: this.fzid, cyyid: this.value }).then((res) => {
                    this.$emit("close");
                    this.$emit("dialogClose");
                })
            }

        },
        dataDictionaryList () {
            findByName('input=' + '业务类型').then((res) => {
                for (var i = 0; i < res.data.length; i++) {
                    if(res.data[i].dictName=='业务类型')
                    this.options1.push({
                        label: res.data[i].dictValue,
                        value: res.data[i].dictValue
                    })
                }
            })
            findByName('input=' + '常用语类型').then((res) => {
                for (var i = 0; i < res.data.length; i++) {
                    if(res.data[i].dictName=='常用语类型')
                    this.options2.push({
                        label: res.data[i].dictValue,
                        value: res.data[i].dictValue
                    })
                }
            })
        },
        leftData () {
            getCyyByAll("input=" + this.record.cyylx).then((res) => {
                if (res) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(res.data[i].type==this.record.cyylx)
                        this.data.push({
                            key: res.data[i].id,
                            label: res.data[i].name
                        })
                    }
                }
            });
        },
        rightData () {
            getCyyInCyyfz(this.fzid).then((res) => {
                if (res) {
                    for (var i = 0; i < res.data.length; i++) {
                        this.value.push(res.data[i].id)
                    }
                }
                else{
                    return
                }
            })
        }

    },
    mounted () {
        if (this.hand) {
            this.ruleForm = Object.assign({},this.record);
            this.dataDictionaryList()
        } else {
            this.title = [this.record.cyylx, this.record.name]
            this.leftData()
            this.rightData()
        }
    }
}
</script>

<style lang="less" scoped>
:deep .el-transfer-panel {
    width: 42%;
}
</style>